<template>
  <div @click="$emit('click')" style="display:flex;justify-content:center">
    <div class="fatherBox" :class="FotColor">
      <div :class="dotColor" class="lamp"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  computed: {
    dotColor() {
      return this.count === 1 ? 'green' : 'red';
    },
    FotColor() {
      return this.count === 1 ? 'greenBorder' : 'redBorder';
    },
  }
};
</script>

<style scoped>
.fatherBox{
  border-radius: 50%;
  border: 5px solid ;
}
.greenBorder {
border-color: rgb(4, 177, 4);
}

.redBorder {
  border-color: rgb(250, 50, 50);
}
.green {
  background: rgb(4, 177, 4);
}

.red {
  background: rgb(250, 50, 50);
}
.lamp{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 6px;
    
}
</style>